<template>
    <el-container class="home-container">
        <el-header>
            <div><span>智慧运维一体化平台</span></div>
            <el-button type="info" @click="logout()">退出</el-button>
        </el-header>
        <el-container style="height:calc(100% - 60px)">
            <el-aside :width="isCollapse ? '65px' : '200px'">
                <div class="toggle-button" @click="toggleCollapse()">|||</div>
                <!-- 菜单区域 -->
                <el-menu
                    background-color="rgba(22,22,22,1)"
                    text-color="#fff"
                    active-text-color="rgb(95,242,168)"
                    unique-opened
                    :collapse="isCollapse"
                    :collapse-transition="false"
                    router
                    :default-active="$route.path.substr(1)"
                >
                    <template v-for="item in menuList">
                        <!-- 一级菜单且没有子集菜单 -->
                        <el-menu-item :index="item.path" v-if="!item.children">
                            <template slot="title"
                                ><i :class="iconObj[item.id]"></i
                                ><span>{{ item.authName }}</span></template
                            >
                        </el-menu-item>
                        <!-- 一级菜单且有子集菜单 -->
                        <el-submenu :index="item.path" v-else>
                            <template slot="title"
                                ><i :class="iconObj[item.id]"></i
                                ><span>{{ item.authName }}</span></template
                            >
                            <template v-for="items in item.children">
                                <!-- 二级菜单且没有子集菜单 -->
                                <el-menu-item
                                    :index="items.path"
                                    v-if="!items.children"
                                >
                                    <template slot="title"
                                        ><i :class="iconObj[items.id]"></i
                                        ><span>{{
                                            items.authName
                                        }}</span></template
                                    >
                                </el-menu-item>
                                <!-- 二级菜单且有子集菜单 -->
                                <el-submenu :index="items.path" v-else>
                                    <template slot="title"
                                        ><i :class="iconObj[items.id]"></i
                                        ><span>{{
                                            items.authName
                                        }}</span></template
                                    >
                                    <template v-for="itemss in items.children">
                                        <el-menu-item
                                            :index="itemss.path"
                                            v-if="!itemss.children"
                                        >
                                            <template slot="title"
                                                ><i class="el-icon-menu"></i>
                                                <span>{{
                                                    itemss.authName
                                                }}</span></template
                                            >
                                        </el-menu-item>
                                    </template>
                                </el-submenu>
                            </template>
                        </el-submenu>
                    </template>
                </el-menu>
            </el-aside>
            <!-- 页面内容 -->
            <el-main>
                <!-- 路由占位符 -->
                <router-view> </router-view>
            </el-main>
        </el-container>
    </el-container>
</template>
<script>
export default {
    data() {
        return {
            menuList: [
                //   {
                //     id: 125,
                //     authName: "设备列表",
                //     path: "Welcome",
                //     order: 1,
                //     children: [{
                //       authName: "转辙机",
                //       path: "ZhuanZheJi",
                //       id: 1,
                //     },
                //     {
                //       authName: "应答器",
                //       path: "YingDaQI",
                //       id: 2,
                //     },
                //     {
                //       authName: "信号机",
                //       path: "XInHaoji",
                //       id: 3,
                //     },
                //     {
                //       authName: "计轴",
                //       path: "JiZhou",
                //       id: 4,
                //     }
                //     ],
                //   },
                {
                    id: "200",
                    authName: "首页",
                    path: "homePage",
                    order: 1,
                },
                {
                    id: "188",
                    authName: "线路图",
                    path: "stateWatch",
                    order: 1,
                },
                {
                    id: 150,
                    authName: "设备列表",
                    path: "150",
                    order: 1,
                    children: [
                        {
                            id: 103,
                            authName: "道岔",
                            path: "103",
                            order: 2,
                            children: [
                                {
                                    authName: "查看",
                                    path: "bifurcateQuery",
                                    id: 2011,
                                },
                                {
                                    authName: "添加",
                                    path: "bifurcateAdd",
                                    id: 2012,
                                },

                                {
                                    authName: "状态",
                                    path: "bifurcateState",
                                    id: 2014,
                                },
                            ],
                        },
                        {
                            id: 101,
                            authName: "信号机",
                            path: "101",
                            order: 2,
                            children: [
                                {
                                    authName: "查看",
                                    path: "telesemeQuery",
                                    id: 3011,
                                },
                                {
                                    authName: "添加",
                                    path: "telesemeAdd",
                                    id: 3012,
                                },

                                {
                                    authName: "状态",
                                    path: "telesemeState",
                                    id: 3014,
                                },
                            ],
                        },
                        {
                            id: 102,
                            authName: "计轴",
                            path: "102",
                            order: 2,
                            children: [
                                {
                                    authName: "查看",
                                    path: "axleSgaftQuery",
                                    id: 4011,
                                },
                                {
                                    authName: "添加",
                                    path: "axleSgaftAdd",
                                    id: 4012,
                                },

                                {
                                    authName: "状态",
                                    path: "axleSgaftState",
                                    id: 4014,
                                },
                            ],
                        },
                    ],
                },
                {
                    id: 125,
                    authName: "故障管理",
                    path: "125",
                    order: 1,
                    children: [
                        {
                            authName: "故障统计",
                            path: "failureReport",
                            id: 10,
                        },
                        {
                            authName: "故障申报",
                            path: "failureReportAdd",
                            id: 11,
                        },
                        {
                            authName: "故障列表",
                            path: "failureReportEdit",
                            id: 12,
                        },
                    ],
                },
                {
                    id: 225,
                    authName: "检修记录",
                    path: "225",
                    order: 1,
                    children: [
                        {
                            authName: "道岔记录",
                            path: "bifurcateRecord",
                            id: 2013,
                        },
                        {
                            authName: "信号机记录",
                            path: "telesemeRecord",
                            id: 3013,
                        },
                        {
                            authName: "计轴记录",
                            path: "axleSgaftRecord",
                            id: 4013,
                        },
                    ],
                },
                {
                    id: "100",
                    authName: "工作平台",
                    path: "workBoard",
                    order: 1,
                },
            ],
            iconObj: {
                150: "el-icon-user",
                103: "el-icon-setting",
                101: "el-icon-odometer",
                102: "el-icon-s-order",
                145: "el-icon-data-line",
                125: "el-icon-circle-close",
                200: "el-icon-s-unfold",
                225: "el-icon-s-tools",
                188: "el-icon-warning-outline",
                100: "el-icon-s-help",
            },
            isCollapse: false,
        };
    },
    created() {
        //this.getMenuList();
    },
    methods: {
        //退出登录
        logout() {
            window.sessionStorage.removeItem("token");
            this.$router.push("/login");
            this.$message.success("退出成功");
        },
        //获取表单列表
        async getMenuList() {
            const { data: res } = await this.$http.get("menus");
            if (res.meta.status !== 200)
                return this.$message.error(res.meta.msg);
            this.menuList = res.data;
        },
        //折叠表单列表
        toggleCollapse() {
            this.isCollapse = !this.isCollapse;
        },
        handleOpen(index, indexPath) {
            this;
            // console.log(this.$route.patxh.substr(1));
            // console.log(index, indexPath);
        },
    },
};
</script>
<style lang="less" scoped>
.el-header {
    background-color: rgb(0, 0, 0);
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
        color: #fff;
        margin-left: 20px;
    }
}
.el-aside {
    background-color: rgba(22, 22, 22, 1);
}
.el-main {
    background-color: #fff;
    position: relative;
}
.home-container {
    height: 100%;
}
.toggle-button {
    background-color: rgba(22, 22, 22, 1);
    font-size: 10px;
    line-height: 24px;
    color: #fff;
    text-align: center;
    letter-spacing: 0.2em;
    cursor: pointer;
}
/deep/ .el-main {
    padding: 0;
    background-image: url(../assets/track.jpg);
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    // background-color: rgba(11, 2, 33, 0.9);
}
.el-menu {
    border-right: 0;
}
</style>
